<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
        margin: auto;
        overflow: hidden;
        cursor: pointer;
    }

    .box ul,
    .box ol {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .box ul li {
        width: 500px;
        height: 400px;
        display: none;
    }

    .box ul li img {
        width: 500px;
        height: 400px;
    }

    .box ol {
        width: 120px;
        position: absolute;
        left: 50%;
        margin-left: -40px;
        bottom: 20px;
        height: 20px;
        background: #fff;
        display: flex;
        justify-content: space-evenly;
        padding: 10px 0;
        border-radius: 20px;
    }

    .box ol li {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #f00;
        border: 1px solid #999;
    }

    .box ol li.current {
        background: #00f;
    }

    .box ul li.current {
        display: block;
    }

    .box .left,
    .box .right {
        position: absolute;
        top: 50%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        background: #ccc;
        text-align: center;
        line-height: 30px;
        text-decoration: none;
        font-weight: bold;
        color: #fff;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li class="current"><img src="../day15DOM对象/images/1.jpg" alt=""></li>
            <li><img src="../day15DOM对象/images/2.jpg" alt=""></li>
            <li><img src="../day15DOM对象/images/3.jpg" alt=""></li>
            <li>
                <img src="../day15DOM对象/images/4.jpg" alt="">
            </li>
        </ul>
        <ol>
            <li class="current " data-name="point" data-i="0"></li>
            <li data-name="point" data-i="1"></li>
            <li data-name="point" data-i="2"></li>
            <li data-name="point" data-i="3"></li>
        </ol>
        <a href="javascript:;" class="left">&lt;</a>
        <a href="javascript:;" class="right">&gt;</a>
    </div>
</body>

<script type="text/javascript">
    /*
        实现功能
        1、自动切换图片 保证小圆点跟随
        2、上一张下一张点击切换图片  小圆点也需要跟随
        3、点击小圆点 切换到对应的图片
    */
    //定义一个变量 index,表示显示的是第几张，初始值为0，默认显示第一张；
    var index = 0;
    var ulDom = document.querySelectorAll("ul li");
    var olDom = document.querySelectorAll("ol li");
    var boxDom = document.querySelector(".box");
    //约定type = 
    // true，表示切换下一张
    // false，表示切换上一张
    // 数字，表示点击的是小圆点对应的图片
    function changeOne(type) {
        // 让当前这张消失
        ulDom[index].className = "";
        olDom[index].className = "";
// console.log(typeof type);
// console.log(type);
// console.log(3===true);
        if (type === true) {
            index++
            // console.log(11)
        } else if (type === false) {
            index--
            // console.log(222)
        } else {
            // console.log(3)
            index = type;
        };

        //判断index边界值
        // index++到最大值时，归零，来显示第一张
        if (index >= ulDom.length) {
            index = 0
        }
        //index--到0时，值为索引长度-1，来显示最后一张
        if (index < 0) {
            index = ulDom.length - 1;
        }

        //显示当前图片
        ulDom[index].className = "current";
        olDom[index].className = "current";
    }

    // 自动轮播
    // var timer = setInterval(function () {
    //     changeOne(true);
    // }, 1000)

    // var timer1; //保存定时器标识
    function timer() {
        timer1 = setInterval(function () {
            changeOne(true)
        }, 1000)
    };
    //自动轮播
    timer();

    //点击事件
    boxDom.addEventListener ("click" ,function (e) {
        // console.log(1111)
        // 判断点击的是那个按钮
        // 左
        // console.log(e.target);
        if (e.target.className === "left") {
            // console.log("left")
            
            changeOne(false);
        }
        // 右
        if (e.target.className === "right") {
            // console.log("right")
           
            changeOne(true);
        }

        // 圆点
        if (e.target.dataset.name === "point") {
             var i = e.target.dataset.i ;
            // console.log(e.target.dataset.i - 0)
            changeOne(i)
        }


    });



    // 鼠标划入停止轮播
    boxDom.onmouseover = function () {
        //清除定时器
        clearInterval(timer1);
    };
    // 鼠标移出，开始轮播
    boxDom.onmouseout =  function () {
        timer();
    };
</script>


<!-- 方法二 -->
<!-- <script type="text/javascript">
    /*
        实现功能
        1、自动切换图片 保证小圆点跟随
        2、上一张下一张点击切换图片  小圆点也需要跟随
        3、点击小圆点 切换到对应的图片
    */
    //1、获取到相关的元素
    var ulLiDoms = document.querySelectorAll('ul>li');
    var olLiDoms = document.querySelectorAll('ol>li');
    // 表示目前显示的图片序号
    var index = 0;
    // 保存定时器标识
    var timer;
    //2、实现自动切换图片
    autoPlay();

    function autoPlay() {
        timer = setInterval(function () {
            index++;
            // 如果到了最后一张图片 重置为第一张图片
            index == 4 && (index = 0) 
            play();
        }, 2000);
    }

    function play(){
        // 设置图片的显示
        document.querySelector('ul>.current').removeAttribute('class');
        ulLiDoms[index].className = 'current';
        // 设置小圆点的跟随
        olLiDoms.forEach(function (item) {
            item.className = '';
        })
        olLiDoms[index].className = 'current';
    }
    // 鼠标划入停止定时器
    document.querySelector('.box').onmouseover = function () {
        clearInterval(timer);
    }
    // 鼠标划出
    document.querySelector('.box').onmouseout = function () {
        autoPlay();
    }
    // 下一张图片点击
    document.querySelector('.right').onclick = function () {
        index++;
        // 如果到了最后一张图片 重置为第一张图片
        index == 4 && (index = 0)
        play();
    }
    // 上一张图片点击
    document.querySelector('.left').onclick = function(){
        index--;
        index == -1 && (index = 3);
        play();
    }
    // 小圆点的点击事件
    olLiDoms.forEach(function(dom,i){
        dom.onclick = function(){
            //因为是forEach i变量 就是每一个小圆点的序号
            index = i;
            
            play();
        }
    })
    
</script> -->

</html>